<template>
    <ul class="tabs">
        <li :class='{tabs_on:tabs_on==index}' @click='tabs_on=index'>全部比赛</li>
        <li :class='{tabs_on:tabs_on==star}' @click='tabs_on=star'>未开始</li>
        <li :class='{tabs_on:tabs_on=="4"}' @click='tabs_on="4"'>进行中</li>
        <li :class='{tabs_on:tabs_on=="5"}' @click='tabs_on="5"'>已结束</li>       
    </ul>
</template>
<script>
import eventBus from '../../../../build/evenBugTab.js'
export default {
    data(){
        return {
            index: '2,3,4,5',
            tabs_on:'2,3,4,5',
            star: '2,3'
            // list:[],
        }
    },
    mounted(){
        // this.com_list()
    },
    methods:{
//         com_list(){
//         this.$axios.post('/mobile/matching/com_list')
//          .then(res=>{
//             this.list = res.data.data
//             // console.log(this.list,11111111)//  测试7777
//             // console.log(this.matchList=res.data.data);     
//             })
//         },
    },
    watch:{
        tabs_on(newValue){
            eventBus.$emit('tabs_on',newValue )
			// this.$emit('change',newValue )
        }
    },
	methods:{
// 		tabs_on(val){
// 			this.$emit('changeStatus',val)
// 		}
	}
}
</script>
<style lang="less" scoped>
.tabs_on{
    background-color: #42b574;
    color:#fff!important;
}
.tabs{
    width: 100%;
    padding:0.2rem 0.3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    font-size: 0.32rem;
    li{
        height: .6rem;
        line-height: 0.6rem;
        padding:0 0.2rem;
        color:#676563;
        font-weight: 600;
    }
}
</style>
